<center>
<div class="table_con" style="">
<table id="treeTb" style="width:90%">
   <tr class="tb_title">
	<td width="10%">ID</td>
    <td width="30%">菜单名</td>
    <td width="30%">菜单URL</td>
    <td width="30%">操作</td>
  </tr>
  <tbody>
  <#list parentMeunList as menu1>
  <tr data-tt-id="${menu1.id}">
    <td width="10%">${menu1.id}</td>
    <td width="30%">${menu1.menuName}</td>
    <td width="30%">${menu1.menuUrl}</td>
    <td width="30%">
    	  <input class="btn btn-info" type="button" onclick="preModifyMenu('${menu1.id}');" value="编辑" />
	      <input class="btn btn-danger" type="button"  onclick="removeMenuFn('${menu1.id}');" value="删除" />
    </td>
  </tr>
  	<#list menu1.childrenMenuList as menu2>
  	  <tr data-tt-id="${menu2.id}" data-tt-parent-id="${menu2.parentId}">
	    <td width="10%">${menu2.id}</td>
	    <td width="30%">${menu2.menuName}</td>
	    <td width="30%">${menu2.menuUrl}</td>
	    <td width="30%">
	    			<input class="btn btn-info" onclick="preModifyMenu('${menu2.id}');" type="button" value="编辑" />
	                <input class="btn btn-danger" onclick="removeMenuFn('${menu2.id}');" type="button" value="删除" />
	    </td>
	  </tr>
  	</#list>
  </#list>
  </tbody>
</table>
</div>
</center>
<center>
<button type="button" class="btn btn-primary" onclick="addMenuDiv();" data-toggle="modal">新增菜单</button>
</center>
<script>
	//点击编辑加载菜单信息
	var preModifyMenu = function(mid)
	{
		$.ajax({
			url:'${request.contextPath}/menu/preModifyMenu.htm',
			type:'post',
			dataType:'html',
			async:'false',
			cache:false,
			processData:true,
			data:{
				'mid':mid
			},
			success:function(html)
			{
				$('#modifyDiv').html(html);
				$('#editModal').modal();
			}
		});
	}
  	$("#treeTb").treetable({ 
  		  expandable:true,
  		  expandLevel:2,
  		  column:0,
  		  onSelect: function($treeTable, id) {
  		  	   alert(id);
  			   return true;
  		  },
  		  beforeExpand: function($treeTable, id) {
  			 
  		  }
  	});
  	$("#treeTb tbody").on("mousedown", "tr", function() {
	  $(".selected").not(this).removeClass("selected");
	  $(this).toggleClass("selected");
	});
</script>

<div id="modifyDiv">

</div>



